<template>
	<view class="page" @click="selectPost">
		
		
		<view class="top-page">
			<view class="label_left">
				<view class="label_top">{{labeltop}}</view>
			</view>
			
			<view class="title">
				<text class="name1">{{item.title}}</text>
			</view>
			<view @click.stop="ch">
				<rudon-rowMenuDotDotDot class="clapa" :localdata="options" @change="menuAction($event, '10087')">
					<image class="clapc" src="/static/d7f9fde72e9033393a0eeafa51db68c.png"></image>
				</rudon-rowMenuDotDotDot>
			</view>
			<u-popup :show="showissue" mode="center" :closeable='true' round="20rpx" customStyle="width: 600rpx;height: 600rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="close">
				<view class="check" >问题反馈</view>
				
				<checkbox-group>
				  <view class="check1">
				    <label for="bad">
				      <checkbox id="bad" value="bad1" />
				      存在不良内容（黄色、血腥暴力等）
				    </label>
				  </view>
				  <view class="check1">
				    <label for="spurious">
				      <checkbox id="spurious" value="spurious1" />
				      存在虚假内容/欺诈行为
				    </label>
				  </view>
				  <view class="check1">
				    <label for="harassment">
				      <checkbox id="harassment" value="harassment1" />
				      受到信息骚扰
				    </label>
				  </view>
				  <view class="check1">
				    <label for="other">
				      <checkbox id="other" value="other1" />
				      其他
				    </label>
				  </view>
				</checkbox-group>
				
				
					<textarea class="input"
					@blur="bindTextAreaBlur" auto-height />
				
				
				<view class="button">
				<u-button  class="bu1" color="rgb(253, 189, 154)" @click="requestissure">提交</u-button>
				
				
				</view>
			</u-popup>
			<u-popup :show="showdetail" mode="center" :closeable='true' round="20rpx" customStyle="width: 600rpx;height: 600rpx;" close-icon-size="30rpx" :closeOnClickOverlay='true' @close="closeissure">
				<view class="sus">问题反馈</view>
				<view class="sus1" >
					提交成功！我们将在1-3个工作日内处理
					并通过应用内动态消息向您反馈处理结
					果，请耐心等待
				</view>
				
				<view class="close">
				<u-button class="close1"  color="rgb(253, 189, 154)" @click="closeissure">关闭</u-button>
				</view>
				
				
			</u-popup>		
			
			
		
		</view >
		<!-- <view class="bottom_page">
			<image :src="url" mode="" class="im1"></image>
			<image :src="url" mode="" class="im1"></image>
		</view> -->
		
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<image class="imgss" mode="aspectFill" 
					v-for="(imageSrc, index) in item.image"
					:key="index"
					:src="imageSrc"
					alt="Image"
					@click.stop="previewImage(index, item.image)"><!-- :src="item.image[0]" -->
					</image>
				<!-- <image class="imgss" :src="item.image[1]" mode="aspectFill"></image>
				<image class="imgss" :src="item.image[2]" mode="aspectFill"></image> -->
		</scroll-view>
		
		<view class="buttom-page">
			<navigator url="/pages/my_page/my_page">
				<image :src="item.head" mode="aspectFill" @click="handleClick()"></image>
			</navigator>
			
			<view class="name">
				<view class="name1">{{item.name}}</view>
				<view class="name2">
					{{item.label}}
					<!-- <uni-dateformat :date="item.label" format="yyyy年M月dd日 hh:mm" ></uni-dateformat> -->
				</view>
			    
				<!-- <textarea name="nishi" id="" cols="30" rows="10"></textarea> -->
			</view>
			
				
			
			<image :src="imgUrl" class="clapb" @click.stop="changeImg"></image>
			
			
			
		</view >
			<view class="alllist">
				<view class="lo_img"><u-icon name="map"></u-icon></view>
				<text class="name2">{{item.location}}</text>
			</view>	
		
		
	</view>
</template>

<script>

	

	
	export default {
		label_le:"学习",
		name:"pati",
		props:{
			labeltop:"",
			post: {
				type: Object,
				default: () => ({})
			},
			option: {
				type: Object,
				default: () => ({})
			},
			my_user: {
				type: Object,
				default: () => ({})
			},
			item:{
				type:Object,
				default:() =>({})
					
				
			}
			
		},
		
		data() {
		    return {
			  showdetail:false,
			  showissue:false,
			  options: [
			  	{
			  		value: 'update',
			  		text: '问题反馈'
			  	}
			  ],
			  now: Date.now(),
		      imgUrl: '/static/clap.png' ,// 初始图片地址
			  m1:'/static/pika.jpg',
			  show:false,
			  showfind:false,
			  // imageSources: [
			  //         '../../static/u33.svg',
					//   '../../static/u33.svg',
					//   '../../static/u33.svg',
					//   '../../static/u33.svg'
			          
					  
			  //       ],
			  
			  scrollTop: 0,
			  				old: {
			  					scrollTop: 0
			  				}
		    }
		  },
		  
		methods: {
			bindTextAreaBlur: function (e) {
			            console.log(e.detail.value)
			        },
			close(){
				this.showissue=false
			},
			requestissure(){
				this.showissue=false
				this.showdetail=true
			},
			closeissure(){
				this.showissue=false
				this.showdetail=false
			},
			menuAction (action, rowId) {
				// 忽略初始化时的传入的空操作
				if (action === '') {
					return
				}
				
				// 打印看参数
				console.log('chengg')
				// console.log(JSON.stringify(rowId))
				this.showissue=true
				
				// 动作
				// ...
				// uni.showToast({
				// 	icon: 'none',
				// 	title: '[动作]'
				// })
			},
			previewImage(indexImg, photoImg) {
					let photoList = photoImg.map(item => {
				let newImg = item
						return newImg;
			  }); //  这一步是为了给每一条图片数据，添加 'data:image/jpeg;base64,'。如果你的图片数据是完整的base64。此条步骤可以省略
					uni.previewImage({
						current: indexImg,
						urls: photoList
					});
				},
			selectPost() {
				this.$emit('selectPost', this.item)
				
			},
		    changeImg() {
		      this.$emit('changeImg', this.item) // 修改后的图片地址
			 
		    },
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			handleClick() {
				console.log('@@')
			      // window.location.href = '../pages/partner_details/partner_details.vue';
				uni.navigateTo({
					url: '/pages/other_page/other_page'
				})
			}
			
		  }
		  
		  
	}
</script>

<style lang="scss" scoped>
	
	.page {
		background-color: white;
		width: 680rpx;
		
		box-sizing: border-box;
		// background-color: lightblue;
		border-radius: 30rpx;
		box-shadow: 8rpx 10rpx 10rpx 10rpx rgb(211,211,211);
		margin-bottom: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;

		margin-top: 40rpx;

		


		
		// RBG(201,254,241)
		.label_left {
			position: absolute;
			// background: url('../../static/u33.svg');
			background-color: rgb(251, 221, 203);
			top: -25rpx;
			left: -15rpx;
			width: 150rpx;
			height: 50rpx;
			.label_top {
				
				display: inline-block;
				font-size: 35rpx;
				width: 145rpx;
				height: 50rpx;
				font-weight: bold;
				text-align: center;
				color: white;
			}
		}
		.top-page {
			width: 680rpx;
			height: 90rpx;
			background-color: white;
			border-radius: 20rpx;
			
			position: relative;
			.title {
				width: 500rpx;
				position: absolute;
				display: inline-block;
				font-size: 40rpx;
				margin: 30rpx;
				font-weight: bolder;
				color: rgb(79,79,79);
			}
			
			
			.clapa {
				height: 80rpx;
				width: 80rpx;
				display: inline-block;
				position: absolute;
				left: 570rpx;
				top: 15rpx;
				.clapc{
					height: 80rpx;
					width: 80rpx;
					display: inline-block;
					position: absolute;
					left: 0rpx;
					top: 0rpx;
					
					
				}
				
			}
			.check {
				padding-top:40rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;
				.check1{
					padding-top:40rpx;font-size: 25rpx;font-weight: bold;padding-left: 40rpx;
				}
			}
			.input {
				padding-top: 20rpx;padding-left: 20rpx;background-color: rgb(242, 242, 242);width: 450rpx;padding-bottom: 20rpx;
				margin-left: 90rpx;margin-top: 10rpx;border-radius: 20rpx;
			}
			.button {
				padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;
				.bu1 {
					font-size: 40rpx;color: white;font-weight: bold;
				}
			}
			.sus {
				padding-top:40rpx;font-size: 40rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;
				.sus1 {
					padding-top:80rpx;font-size: 30rpx;font-weight: bold;text-align: center;padding-left: 40rpx;padding-right: 40rpx;
					height: 250rpx;padding-left: 40rpx;padding-right: 40rpx;text-align: start;
				}
			}
			.close {
				padding-top: 20rpx;padding-left: 40rpx;padding-right: 40rpx;margin-bottom: 40rpx;
				.close1 {
					font-size: 40rpx;color: white;font-weight: bold;
				}
			}
				
			
			
		}
		
			
			.scroll-view_H {
					white-space: nowrap;
					width: 100%;
					
					height: 100px;
					position: relative;
					top: 0rpx;
					left: 0rpx;
					display: inline-block;
					background-color: white;
					border-radius: 20rpx;
							
							.imgss {
								width: 180rpx;
								height: 180rpx;
								display: inline-block;
								border: 20rpx solid white;
								border-radius: 20%;
								background-color: rgb(254,237,211);
							}
			}
	.buttom-page {
		width: 680rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 20rpx;
		
		position: relative;
		.title {
			position: absolute;
			display: inline-block;
			font-size: 25rpx;
		}
		image {
			width: 60rpx;
			height: 60rpx;
			border-radius: 80%;
			display: inline-block;
			position: absolute;
			top: 20rpx;
			left: 30rpx;
		}
		.name {
			width: 350rpx;
			display: inline-block;
			
			margin-left: 20rpx;
			position: absolute;
			left: 95rpx;
			top: 5rpx;
			.name1 {
				font-weight: 600;
				font-size: 35rpx;
				height: 40rpx;
				display: block;
				color: rgb(79,79,79);
			}
			
		}
		.clapb {
			width: 60rpx;
			display: inline-block;
			position: absolute;
			left: 600rpx;
			top: 10rpx;
			
		}
		.alllist {
			 padding-left: 20rpx;
			 padding-bottom: 10rpx;
			 .name2 {
			 	font-size: 30rpx;
			 	height: 30rpx;
			 	display: block;
			 	color: rgb(79,79,79);
			 }
			 .lo_img {
			 	
			 	width: 40rpx;
			 	height: 40rpx;
			 	display: inline-block;
			 	
			 	margin-left: 20rpx;
			 	position: absolute;
			 	left: 420rpx;
			 	top: 30rpx;
			 }
		}
		
		
		
			
		
		
	}
		
	}
	
	
	
	
	
	
	

</style>